<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" @click="AddressShow = true" />

    <!-- 商品卡片 -->
    <van-card
        v-for="item in OrderProductData"
        :thumb="item.products.thumb_text"
        @click-thumb="ToProduct(item.proid)"
    >
        <template #title>
            <div class="title" @click="ToProduct(item.proid)">{{ item.products.name }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
            <van-tag v-for="(attr,index) in JSON.parse(item.attrs)" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-else>
            <van-tag class="tag" type="danger">无商品规格</van-tag>
        </template>

        <template #price>
            <div class="price-box">
                <div class="price">
                    <p>单价：￥{{item.price}}</p>
                    <p>商品总价：￥ {{ item.total }}</p>
                </div>
                <div class="num">x{{ item.pronum }}</div>
            </div>
        </template>

        <template #footer v-if="order.status >= '3'">
            <van-button type="warning" size="mini" @click="OnCommentChange(item)">
                {{item.status ? '查看评价' : '立即评价'}}
            </van-button>
        </template>
    </van-card>

    <!-- 订单信息 -->
    <van-cell title="订单号" :value="order.code" />
    <van-cell title="优惠金额" v-if="order.coupon" :value="`￥${order.coupon_price}`" />
    <van-cell title="订单总价" :value="`￥${order.amount}`" />
    <van-cell title="支付方式" :value="order.pay_text" />
    <van-cell title="订单状态" :value="order.status_text" />
    <van-cell title="下单时间" :value="order.createtime_text" />
    <van-cell title="订单描述" :value="order.remark" />

    <!-- 操作按钮组 -->
    <div class="actions">
        <van-button square hairline type="primary" size="large">在线客服</van-button>

        <van-button v-if="order.status == '1'" square hairline type="danger" size="large" @click="OnRefund">申请退款</van-button>

        <van-button v-if="order.status == '2'" square hairline type="success" size="large" @click="OnConfirmReceive(order.id)">确认收货</van-button>
        <van-button v-if="order.status == '2'" square hairline type="warning" size="large" @click="ToExpress(order.id)">物流详情</van-button>
    </div>

    <!-- 仅退款弹框 -->
    <van-popup v-model:show="ApplyShow" position="bottom" round :style="{paddingBottom: '20px'}">
        <van-picker
            title="退款原因"
            :columns="RemarkList"
            @cancel="ApplyShow = false"
            @confirm="OnRefundApply"
        />
    </van-popup>

    <!-- 收货地址弹出层 -->
    <van-popup
        v-model:show="AddressShow"
        position="bottom"
        round
        style="padding-top: 4px;"
    >
        <van-form>
            <van-field 
                v-model="address.consignee"
                label="收件人"
                readonly
            />
            <van-field 
                v-model="address.mobile"
                label="手机号码"
                readonly
            />
            <van-field 
                v-model="address.region_text"
                label="所在地区"
                readonly
            />
            <van-field 
                v-model="address.address"
                label="详细地址"
                readonly
            />
            <van-field 
                v-model="address.status_text"
                label="是否默认地址"
                readonly
            />
            <div style="width:80%;margin:1em auto;">
                <van-button round block type="primary" @click="AddressShow = false">关闭</van-button>
            </div>
        </van-form>
    </van-popup>

    <!-- 评论弹出层 -->
    <van-popup
        v-model:show="CommentShow"
        position="bottom"
        round
        style="height: 60%; padding-top: 4px;"
    >
        <van-form @submit="OnCommentSubmit">
            <van-field 
                label="评论内容"
                type="textarea"
                rows="3"
                v-model="CommentData.comment"
                placeholder="请输入评论内容"
                :rules="[
                    {required: true, message: '请输入评论内容'},
                ]"
                :readonly="CommentData.status"
            />

            <van-field label="评分">
                <template #input>
                    <van-rate v-model="CommentData.rate" :readonly="CommentData.status" />
                </template>
            </van-field>

            <van-field label="上传图集">
                <template #input>
                    <van-uploader 
                        v-model="thumbs" 
                        multiple 
                        :max-count="8"
                        :readonly="CommentData.status ? true : false"
                        :deletable="CommentData.status ? false : true"
                    />
                </template>
            </van-field>

            <div style="width:80%;margin:2em auto;">
                <van-button v-if="CommentData.status" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" @click="CommentShow = false">关闭弹框</van-button>
                <van-button v-else round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交评价</van-button>
            </div>
        </van-form>
    </van-popup>

</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

// 订单收货地址
const address = ref({});
// 订单商品数据
const OrderProductData = ref([]);
// 订单信息
const order = ref({});

// 是否显示仅退款
const ApplyShow = ref(false);
// 是否显示收货地址信息
const AddressShow = ref(false);
// 是否显示评价
const CommentShow = ref(false);
const CommentData = ref({
    id: 0,
    rate: 0,
    comment: '',
    status: false
});
const thumbs = ref([]);

// 获取orderid
const orderid = ref(proxy.$route.query.orderid);

onBeforeMount(() =>
{
    GetOrderInfo();
})

const GetOrderInfo = async () =>
{
    const params = {
        orderid:orderid.value,
        busid:business.value.id
    }

    const result = await proxy.$http.post('/order/info',params);

    if(result.code === 1)
    {
        order.value = result.data.order;
        OrderProductData.value = result.data.OrderProductData;
        address.value = result.data.address;

        // 如果有使用优惠券
        if(order.value.coupon)
        {
            // 购买的商品总价
            let amount = 0;

            // 循环计算
            OrderProductData.value.map(product =>
            {
                amount += parseFloat(product.total);

            })

            // 优惠价格
            order.value.coupon_price = (amount - parseFloat(order.value.amount)).toFixed(2);
        }

        // 循环计算
        OrderProductData.value.map(product =>
        {
            // 给商品追加一个自定义属性 用于判断是否有无评价
            // 根据评论时间来判断是否有评价过
            product.status = product.comtime ? true : false;

        })
    }else{
        proxy.$fail(result.msg,() => proxy.$router.back());
    }
}

const ToProduct = (proid) => proxy.$router.push({path:'/product/info',query:{proid}});

const OnRefund = () =>
{
    
}

const OnCommentChange = (item) =>
{
    // 如果查看评价的
    CommentData.value = {
        id:item.id,// 订单商品关联表主键
        rate:parseInt(item.rate),
        comment:item.comment,
        status:item.status
    }

    // 一个存放评价图片的数组
    const list = [];

    // 组装图片回显
    if(item.thumbs)
    {
        item.thumbs_text.map(thumb =>
        {
            list.push({
                url:thumb
            })
        });
    }

    thumbs.value = list;

    CommentShow.value = true;
}

const OnCommentSubmit = async () =>
{
    const params = {
        id:CommentData.value.id,
        rate:CommentData.value.rate,
        comment:CommentData.value.comment,
        busid:business.value.id,
        orderid:orderid.value
    }

    if(thumbs.value.length > 0)
    {
        // 定义存放 file 的数组
        const list = [];

        thumbs.value.map(thumb =>
        {
            if(thumb?.file)
            {
                list.push(thumb.file);
            }
        });

        params.thumbs = list;
    }

    const result = await proxy.$http.upload('/order/comment',params);

    if(result.code === 1)
    {
        proxy.$success(result.msg,() => GetOrderInfo());
    }else{
        proxy.$fail(result.msg);
    }
}
</script>

<style scoped>
@import url('/assets/css/OrderInfo.css');
</style>